

<div class="layui-form" lay-filter="layuiadmin-form-role" id="form">
	<div class="form-cont" style="padding: 20px 30px 0 0;">
		<div class="layui-form-item verify">
		  <label class="layui-form-label">姓名</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.real_name" verify='require|realname' placeholder="请输入姓名" class="layui-input">
			  <span class="hint">请输入真实姓名</span>
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">电话</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.tel" verify='phone' placeholder="请输入电话" class="layui-input">
			  <span class="hint">请输入电话</span>
			</div>
		</div>
		<div class="layui-form-item">
		  <label class="layui-form-label">性别</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-select">
		      	<div class="layui-select-title"><input type="text" name='sex' :data='detail.sex' placeholder="请选择性别" class="layui-input layui-unselect" disabled><i
		      		 class="layui-edge"></i></div>
		      	<dl class="layui-anim layui-anim-upbit">
		      		<dd class="layui-select-tips layui-this">请选择性别</dd>
		      		<dd data='0'>保密</dd>
						<dd data='1'>男</dd>
						<dd data='2'>女</dd>
		      	</dl>
		      </div>
		  </div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">身份证号码</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.card_id" verify='require|card' placeholder="请输入身份证号" class="layui-input">
			  <span class="hint">请输入身份证号码</span>
			</div>
		</div>
		<div class="layui-form-item">
		  <label class="layui-form-label">身份证照片</label>
		  <div class="layui-input-block">
			  <button type="button" class="layui-btn" id="upload" v-if="!detail.card_photo">
			    <i class="layui-icon">&#xe67c;</i>上传图片
			  </button>
			  <div class="flex img-box" v-else>
				  <span @click="detail.card_photo=''">x</span>
			  	<img :src="detail.card_photo">
			  </div>
		  </div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">所在地址</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.address" verify='require|address' placeholder="请输入当前所在地址" class="layui-input">
			  <span class="hint">请输入当前所在地址</span>
		  </div>
		</div>
	</div>
	  <div class="form-btn" v-if="type!=3">
		<input type="button" value="保存" class="layui-btn" @click="submit">
	  </div>
</div>
<style type="text/css">
	.img-box{
		width: 60px;
		height: 60px;
		border: 1px solid #eee;
		position: relative;
	}
	.img-box img{
		max-width: 100%;
		max-height: 100%;
	}
	.img-box span{
		position: absolute;
		width: 15px;
		line-height: 15px;
		text-align: center;
		font-family: arial;
		top: -8px;
		right: -8px;
		border-radius: 50%;
		background: rgba(0,0,0,.5);
		color:#fff;
		font-size: 12px;
		cursor: pointer;
	}
	.form-cont{
	  overflow: auto;
	 }
</style>
<script>
	layui.use(['form','upload','laydate'], function(){
	  var $ = layui.$
	  ,form = layui.form,upload=layui.upload,laydate=layui.laydate;
	  form.verify(layui.admin.verify);
	  laydate.render({
	      elem: '#time',
	    });
	  laydate.render({
		   elem: '#time1',
		});

	  var forms=new Vue({
	  		el:'#form',
	  		data:{
	  			role:[],
				type:layui.admin.objData.type,
				detail:{
					member_status:2,
					sex:'',
					member_id:'',
					id_photo:''
				},
				old_detail:{},
				real_name:'',
				sex:''
	  		},
	  		mounted() {
				var _this=this;
				//初始化
				if(this.type!=1) this.detail=layui.admin.objData.detail,this.old_detail=JSON.stringify(layui.admin.objData.detail);
				if(this.detail.sex==1){
					this.sex='男';
				}else if(this.detail.sex==2){
					this.sex='女';
				}else if(this.detail.sex===0){
					this.sex='保密';
				}

				//$('input[name="jrole"]').val(this.detail.real_name);
				$('input[name="sex"]').val(this.sex);
				//身份证上传
			      upload.render({
				    elem: '#upload' ,//绑定元素
					field:'image',
					accept:'images',
				    url: layui.conf.ajaxUrl+'login/upload_img',
					data:{module:'notice',folder:'/cat/logo'}
				    ,done: function(res){
					  _this.detail.id_photo=res.data.img_url;
				    }
				    ,error: function(){}
				  });
	  		},
	  		methods:{
	  			radioF(){//radio选择
	  				this.detail.member_status==1?this.detail.member_status=0:this.detail.member_status=1;
	  			},
				submit(){

					if(layui.admin.form('#form')){
						//this.detail.member_id=parseInt($('input[name="jrole"]').attr('data'));
						this.detail.sex=parseInt($('input[name="sex"]').attr('data'));
						if(this.type==2){   //编辑
							var data=layui.admin.filter(this.detail,JSON.parse(this.old_detail),'member_id');
							if(data){
								layui.admin.formapi('members/update',data);
							}
						}else{  //添加
							// layui.admin.formapi('admins/add',this.detail);
						}
					}
				}
	  		},
	  	})
	});
</script>
